<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
    <title>Sentences</title>
    <style>
        @font-face {
            font-family: Segoe Print;
            src: url("/static/segoe_print.ttf");
        }

        @font-face {
            font-family: Lucida Sans;
            src: url("/static/LucidaSans.otf");
        }

        body {
            font-family: 'Segoe Print', '等线', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20px;
            background-color: whitesmoke;
        }

        .container {
            margin: auto;
            display: flex;
            flex-direction: row;
            padding: 0px 10px 0px 10px;
            width: fit-content;
            flex-wrap: wrap;
        }

        .card {
            box-shadow: gray 1px 2px 8px;
            width: fit-content;
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            max-width: 540px;
            overflow-wrap: normal;
        }

        .card:hover {
            background-color: rgb(235, 233, 233);
        }
    </style>
    <script src="/static/jquery-3.4.1.min.js"></script>
    <script>
        function createAllCards(data) {
            data = data["data"];
            let container = document.getElementById("container");
            for (let i = 0; i < data.length; i++) {
                const sentence = data[i];
                let card = document.createElement("div");
                card.className = "card";
                card.innerHTML = sentence["sentence"];
                container.appendChild(card);
            }
        }
        window.onload = function () {
            $.get("/cgi/allsentences", (data, status, xhr) => {
                if (status == "success") createAllCards((typeof (data) == "string" ? JSON.parse(data) : data));
                else alert("获取数据失败");
            }).fail(() => { alert("网络错误"); });
        };
    </script>
</head>

<body>
    <div id="container" class="container">
        <!-- <div class="card">
            In addition, the number of suspected cases rose to 9,239.
        </div> -->
    </div>
</body>

</html>